|
1
|
|
|
import React, { Component } from 'react' |
|
2
|
|
|
import { Experiment, Variant } from 'react-split-testing' |
|
3
|
|
|
|
|
4
|
|
|
|
|
5
|
|
|
export default class App extends Component { |
|
6
|
|
|
constructor(props) { |
|
7
|
|
|
super(props) |
|
8
|
|
|
|
|
9
|
|
|
this.experiment = React.createRef() |
|
10
|
|
|
|
|
11
|
|
|
this.onClick = this.onClick.bind(this) |
|
12
|
|
|
this.onChoice = this.onChoice.bind(this) |
|
13
|
|
|
this.onRawChoice = this.onRawChoice.bind(this) |
|
14
|
|
|
} |
|
15
|
|
|
|
|
16
|
|
|
onClick() { |
|
17
|
|
|
const experiment = this.experiment.current |
|
18
|
|
|
|
|
|
|
|
|
|
19
|
|
|
alert( |
|
|
|
|
|
|
20
|
|
|
`Experiment name: "${experiment.getName()}"\n` + |
|
21
|
|
|
`Variant name: "${experiment.getActiveVariantName()}"` |
|
22
|
|
|
) |
|
23
|
|
|
} |
|
24
|
|
|
|
|
25
|
|
|
onChoice(experimentName, variantName) { |
|
26
|
|
|
console.log( |
|
27
|
|
|
`Experiment name: "${experimentName}"\n` + |
|
28
|
|
|
`Variant name: "${variantName}"` |
|
29
|
|
|
) |
|
30
|
|
|
} |
|
31
|
|
|
|
|
32
|
|
|
onRawChoice(experiment, variant) { |
|
33
|
|
|
console.log( |
|
34
|
|
|
`Experiment name: "${experiment.getName()}"\n` + |
|
35
|
|
|
`Variant name: "${variant.props.name}"\n` + |
|
36
|
|
|
`Variant weight: ${variant.props.weight}` |
|
37
|
|
|
) |
|
38
|
|
|
} |
|
39
|
|
|
|
|
40
|
|
|
render() { |
|
41
|
|
|
return ( |
|
42
|
|
|
<div className="App"> |
|
43
|
|
|
<div className="block"> |
|
44
|
|
|
<h1>Experiment #1</h1> |
|
45
|
|
|
<Experiment |
|
46
|
|
|
ref={this.experiment} |
|
47
|
|
|
name="Experiment #1" |
|
48
|
|
|
onChoice={this.onChoice} |
|
49
|
|
|
> |
|
50
|
|
|
<Variant name="A"> |
|
51
|
|
|
<div>Section A</div> |
|
52
|
|
|
<button onClick={this.onClick}>Click me</button> |
|
53
|
|
|
</Variant> |
|
54
|
|
|
<Variant name="B" weight={2}> |
|
55
|
|
|
<div>Section B</div> |
|
56
|
|
|
<button onClick={this.onClick}>Click me</button> |
|
57
|
|
|
</Variant> |
|
58
|
|
|
<Variant name="C"> |
|
59
|
|
|
<div>Section C</div> |
|
60
|
|
|
<button onClick={this.onClick}>Click me</button> |
|
61
|
|
|
</Variant> |
|
62
|
|
|
</Experiment> |
|
63
|
|
|
</div> |
|
64
|
|
|
|
|
65
|
|
|
<div className="block"> |
|
66
|
|
|
<h1>Experiment #2</h1> |
|
67
|
|
|
<span>(userIdentifier="something")</span> |
|
68
|
|
|
<Experiment |
|
69
|
|
|
name="Experiment #2" |
|
70
|
|
|
userIdentifier="something" |
|
71
|
|
|
onRawChoice={this.onRawChoice} |
|
72
|
|
|
> |
|
73
|
|
|
<Variant name="A"> |
|
74
|
|
|
<div>Section A</div> |
|
75
|
|
|
</Variant> |
|
76
|
|
|
<Variant name="B" weight={2}> |
|
77
|
|
|
<div>Section B</div> |
|
78
|
|
|
</Variant> |
|
79
|
|
|
</Experiment> |
|
80
|
|
|
</div> |
|
81
|
|
|
|
|
82
|
|
|
<div className="block"> |
|
83
|
|
|
<h1>Experiment #3</h1> |
|
84
|
|
|
<span>(variantName="B")</span> |
|
85
|
|
|
<Experiment name="Experiment #3" variantName="B"> |
|
86
|
|
|
<Variant name="A"> |
|
87
|
|
|
<div>Section A</div> |
|
88
|
|
|
</Variant> |
|
89
|
|
|
<Variant name="B"> |
|
90
|
|
|
<div>Section B</div> |
|
91
|
|
|
</Variant> |
|
92
|
|
|
</Experiment> |
|
93
|
|
|
</div> |
|
94
|
|
|
|
|
95
|
|
|
<a |
|
96
|
|
|
href="https://github.com/expert-m/react-split-testing/tree/master/examples/simple" |
|
97
|
|
|
target="_blank" |
|
98
|
|
|
rel="noopener noreferrer" |
|
99
|
|
|
className="link" |
|
100
|
|
|
>GitHub</a> |
|
101
|
|
|
</div> |
|
102
|
|
|
) |
|
103
|
|
|
} |
|
104
|
|
|
} |
|
105
|
|
|
|
expert-m /
react-split-testing
Loading history...